<template>
	<view class="navbar">
		<view class="navItem" 
					v-for="(item,index) in titles" 
					:key="index" 
					:class="{
						left: index==0,
						right: index == titles.length-1,
						active: index == currentIndex
					}"
					:style="'height:' + height + 'rpx;line-height:' + height + 'rpx;'"
					@tap="itemClick(index)">
			{{item}}
		</view>
	</view>
</template>

<script>
	export default {
		name: 'NavBar',
		props: {
			titles: {
				type: Array,
				default() {
					return []
				}
			},
			height: {
				type: Number,
				default() {
					return 0
				}
			}
		},
		data() {
			return {
				currentIndex: 0
			}
		},
		methods: {
			itemClick(index) {
			  this.currentIndex = index;
			  this.$emit('tabClick', index)
			}
		}
	}
</script>

<style scoped>
	.navbar {
		display: flex;
		width: 100%;
		text-align: center;
		/* line-height: 54.54rpx; */
		/* height: 54.54rpx; */
	}
	
	.navItem {
		flex: 1;
		font-size: 25.45rpx;
		font-weight: 700;
		/* background-color: #CFE4FF; */
	}
	
	.left {
		border-radius: 27.27rpx 0 0 27.27rpx;
	}
	
	.right {
		border-radius: 0 27.27rpx 27.27rpx 0;
	}
	
	.active {
		background-color: #62A7FF;
		color: #FFFFFF;
	}
</style>
